<template>
  <div class="pd-20">
    <div class="talking-tag">
      <div class="talking-tag__title">{{ topic }}</div>
      <div class="talking-tag__sub-title">#点击对话框可复制文字内容#</div>
      <div>
        <div
          class="talking-tag__content"
          v-for="tab in conversations.tabs"
          :key="tab"
        >
          <span class="talking-tag__content_title">{{ tab }}</span>
          <div
            class="tab-content"
            v-for="(content, i) in conversations.contents[tab]"
            :key="i"
          >
            <div
              v-if="!isEven(`${i + 1}`)"
              class="text-left"
              @click="copyWord(content)"
            >
              {{ content }}
            </div>
            <div v-else class="text-right" @click="copyWord(content)">
              {{ content }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  knowGirls,
  interChats,
  updateRelation,
  intimateMaintenance,
  conventionalLearning,
} from "../data/data";
import { copyWord } from "../utils/copy";
export default {
  data() {
    return {
      contents: {
        ...knowGirls,
        ...interChats,
        ...updateRelation,
        ...intimateMaintenance,
        ...conventionalLearning,
      },
    };
  },
  computed: {
    topic() {
      return this.$route.query.topic;
    },
    conversations() {
      const topic = this.$route.query.topic;
      const tabs = Object.keys(this.contents[topic]);
      const contents = this.contents[topic];
      return {
        tabs,
        contents,
      };
    },
  },
  mounted() {
    console.log(this.conversations);
  },
  methods: {
    copyWord(words) {
      return copyWord(words);
    },
    isEven(i) {
      return i % 2 === 0;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>